<div class="vfx_container">
    {volist name='vfx' id='vo' key='i'}
    {if $i % 4 == 1}
    <div class="vfx_box vfx_jia bright">
        <div class="through_zi">
            <div class="through_zi_mask"></div>
        </div>
        <div class="bright">
            <div class="light"></div>
            <div class="main_title wow bounceInLeft" data-wow-duration="3s">{$vo.title}</div>
            <img class="main_img" src="{$vo.image}" alt="">
            <div class="mask">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title wow bounceInLeft" data-wow-duration="3s">{$vo.title}</div>
                </div>
            </div>
        </div>
    </div>
    {elseif $i % 4 == 2}
    <div class="vfx_box vfx_yi bright">
        <div class="through_chou">
            <div class="through_chou_mask"></div>
        </div>
        <div class="bright">
            <div class="light"></div>
            <div class="light_green"></div>
            <div class="main_title wow flipInX" data-wow-duration="2s">{$vo.title}</div>
            <img class="main_img" src="{$vo.image}" alt="">
            <div class="mask">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
            <div class="mask mask_chou">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
        </div>
    </div>
    {elseif $i % 4 == 3}
    <div class="vfx_box vfx_bing bright">
        <div class="bright">
            <div class="light"></div>
            <div class="light_green"></div>
            <div class="main_title main_title_bing wow flipInX" data-wow-duration="2s">{$vo.title}</div>
            <img class="main_img" src="{$vo.image}" alt="">
            <div class="mask">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title main_title_bing wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
            <div class="mask mask_chou">
                <div class="content" style="background-image: url('{$vo.image}');">
                </div>
            </div>
            <div class="mask mask_yin">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title main_title_bing wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
        </div>
    </div>
    {elseif $i % 4 == 0}
    <div class="vfx_box vfx_ding opacity">
        <div class="through_zi">
            <div class="through_zi_mask"></div>
        </div>
        <div class="bright">
            <div class="light"></div>
            <div class="light_green"></div>
            <div class="main_title main_title_ding wow flipInX" data-wow-duration="2s">{$vo.title}</div>
            <img class="main_img" src="{$vo.image}" alt="">
            <div class="mask_zi">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title main_title_ding wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
            <div class="mask_chou">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title main_title_ding wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
            <div class="mask_yin">
                <div class="content" style="background-image: url('{$vo.image}');">
                    <div class="main_title main_title_ding wow flipInX" data-wow-duration="2s">{$vo.title}</div>
                </div>
            </div>
        </div>
    </div>
    {/if}
    {/volist}
    <div class="start_web"><span class="go">GO</span>进入网站</div>
</div>
<div class="form-wrapper">
    <h1>预约加盟代理</h1>
    <form onsubmit="return message()" class="form-container">
        <input id="addr" type="text" autocomplete="off" placeholder="请输入所在地区">
        <input id="product" type="text" autocomplete="off" placeholder="请选择产品类型">
        <input id="username" type="text" autocomplete="off" placeholder="请输入联系人">
        <input id="telephone" type="text" autocomplete="off" placeholder="请输入手机号">
        <button type="submit">点击提交</button>
    </form>
</div>
<div class="index_logo_box">
    <img src="/source/img/kaxini_logo.png" alt="">
</div>
<div class="crumb">
    <b>服务理念</b>
    <p>SERVICE IDEA</p>
</div>
<div class="animation">
    <div class="black"></div>
    <div class="red"></div>
    <div class="yellow"></div>
</div>
<div class="service">
    {volist name='service' id='vo'}
    <a class="item">
        <img src="{$vo.image}">
        <b>{$vo.title}</b>
        <p>{$vo.desc}</p>
    </a>
    {/volist}
</div>
<div class="art_paint_tit">
    <image src="/source/img/art_paint.png"></image>
</div>
<div class="art_paint">
    {volist name='art' id='vo'}
    <a class="item">
        <img src="{$vo.image}">
        <p>{$vo.title}</p>
        <p>{$vo.desc}</p>
    </a>
    {/volist}
</div>
<div class="colorful_tit">
    <b>身边不缺少美        只是缺少发现</b>
    <p>BEAUTY IS NOT LACKING AROUND US ,IT'S JUST LACKING IN DISCOVERY.</p>
</div>
<div class="colorful">
    {volist name='discover' id='vo'}
    <div class="item">
        <b>{$vo.title}</b>
        <p>{$vo.desc}</p>
    </div>
    {/volist}
</div>

<div class="crumb">
    <b>关于我们</b>
    <p>ABOUT US</p>
</div>
<div class="animation">
    <div class="black"></div>
    <div class="red"></div>
    <div class="yellow"></div>
</div>

<div class="about_us">
    <div class="pc_bucket">
        <img src="{$site.about1_img}">
    </div>
    <div class="text">
        <img src="{$site.about1_img}" class="mb_bucket">
        <p>{$site.about1_cn}</p>
        <p>{$site.about1_en}</p>
    </div>

    <div class="text">
        <img src="{$site.about2_img}" class="mb_bucket">
        <p>{$site.about2_cn}</p>
        <p>{$site.about2_en}</p>
    </div>
    <div class="pc_bucket">
        <img src="{$site.about2_img}">
    </div>

</div>
<div style="clear: both;"></div>

<div class="lines">
    <div></div>
    <div></div>
</div>

<div class="crumb" style="margin-top: 30px;">
    <b>企业理念</b>
    <p>CORPORATE PHILOSOPHY</p>
</div>
<div class="animation">
    <div class="black"></div>
    <div class="red"></div>
    <div class="yellow"></div>
</div>

<div class="idea">
    {volist name='idea' id='vo'}
    <div class="item">
        <img src="{$vo.image}" alt="">
        <h3 class="title">{$vo.title}</h3>
        <p class="text">{$vo.desc}</p>
    </div>
    {/volist}
</div>

<div class="brand_box">
    <div class="crumb">
        <b>品牌优势</b>
        <p>BRAND ADVANTAGE</p>
    </div>
    <div class="brand_desc">
        <div class="item">品质可靠</div>
        <div class="item">精益求精</div>
        <div class="item">卓越创新</div>
        <div class="animation">
            <div class="black"></div>
            <div class="red"></div>
            <div class="yellow"></div>
        </div>
    </div>

    <div class="brand_list">
        {volist name='brand' id='vo'}
        <div class="item">
            <div class="tit">
                <img src="{$vo.image}" class="image">
                <h1>{$vo.title}</h1>
            </div>
            <p>{$vo.desc}</p>
        </div>
        {/volist}
    </div>
</div>


<div class="product">
    <div class="crumb">
        <b>产品中心</b>
        <p>PRODUCT CENTER</p>
    </div>
    <div class="animation">
        <div class="black"></div>
        <div class="red"></div>
        <div class="yellow"></div>
    </div>
    <div class="lists">
        {volist name='product' id='vo'}
        <a class="item" href="{:url('product/detail',['id'=>$vo.id])}">
            <img src="{$vo.image}" alt="{$vo.title}">
            <div class="tit">{$vo.title}</div>
        </a>
        {/volist}
    </div>
    <a class="more" href="{:url('product/index')}">查看更多</a>
    <div class="lines">
        <div></div>
        <div></div>
    </div>
</div>


<div class="agent_box">
    <div class="crumb">
        <b>加盟代理<span style="color:#52A89E;"></span>支持</b>
    </div>
    <div class="animation">
        <div class="black"></div>
        <div class="red"></div>
        <div class="yellow"></div>
    </div>
</div>

<div class="join-list container">
    {volist name='join_support' id='vo' key='k'}
    <div class="join-item {if condition='$k%2!==0'}bottom{else/}top{/if}">
        {if condition='$k<10'}
        <div class="join-index">0{$k}</div>
        {else/}
        <div class="join-index">{$k}</div>
        {/if}
        <div class="join-title">{$vo.title}</div>
        <img src="{$vo.image}">
        <div class="join-content">
            <div>{$vo.desc}</div>
        </div>
    </div>
    {/volist}
</div>

<div class="process">
    <div class="crumb">
        <b>服务流程</b>
        <p>SERVICE PROCESS</p>
    </div>
    <div class="animation">
        <div class="black"></div>
        <div class="red"></div>
        <div class="yellow"></div>
    </div>
    <div class="lists">
        {volist name='process' id='vo' key='k'}
        <div class="item">
            <img src="{$vo.image}" alt="{$vo.title}">
            <div class="title">
                {if condition="$k<=9"}
                <b>0{$k}</b>
                {else/}
                <b>{$k}</b>
                {/if}
                <span>{$vo.title}</span>
            </div>
            <p>{$vo.desc}</p>
        </div>
        {/volist}
    </div>
</div>